<template>
  <div class="file-analysis">
    <!-- 顶部LOGO和标题区域 -->
    <header class="header">
      <div class="logo">
        <h1>LOGO大模型辅助招标分析平台</h1>
        <h2>北京污水项目</h2>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧文件管理区域 -->
      <div class="file-management">
        <h3>应标文件管理</h3>
        <div class="current-project">
      <h4 class="sub-title">当前项目文件</h4>
      
      <a-card class="project-card">
        <div class="project-header">
          <span class="project-name">北京地铁项目招标书</span>
          <span class="file-count">3个文件</span>
        </div>

        <div class="file-list">
  <vue3-seamless-scroll 
    :list="projectList"
    :options="scrollOptions"
    class="scroll-container"
    :key="refreshCount"
  >
    <div class="file-item" 
    v-for="(item,index) in projectList"
         :class="[item.state === '处理中' ? 'processing' : 'queuing']"
    >
      <div class="file-basic">
        <FileOutlined :style="{ fontSize: '16px', color: 'red' }" />
        <span class="file-name">{{ item.name }}</span>
        <span class="status">{{ item.state }}</span>
      </div>
      <a-progress v-if="item.state === '处理中'" :percent="75" status="active" />
      <div class="file-meta">
        <span>上传时间: {{ item.time }}</span>
        <span>{{ item.state === '处理中' ? '预计完成' : '预计等待' }}: {{ item.finishTime }}</span>
      </div>
    </div>
  </vue3-seamless-scroll>
</div>
         <!-- 操作按钮组 -->
      <div class="action-group">
        <a-button type="primary">
          <template #icon><CloudUploadOutlined /></template>
          上传文件
        </a-button>
        <a-button>
          <template #icon><PlusOutlined /></template>
          添加评分规则
        </a-button>
        <a-button>
          <template #icon><CaretUpOutlined /></template>
          智能处理
        </a-button>
      </div>
      </a-card>
    </div>
      <!-- 最近处理项目区域 -->
      <div class="recent-projects">
    <h4 class="section-title">最近处理项目</h4>
    
    <div class="project-list">
      <vue3-seamless-scroll 
    :list="disposeProjectList"
    :options="scrollOptions"
    class="scroll-container"
    :key="refreshCount"
  >
      <a-card class="project-card" v-for="(item, index) in disposeProjectList" :key="index"
      >
        <div class="project-header">
          <div class="project-title">
            <FileOutlined :style="{ fontSize: '16px', color: '#ff4d4f' }" />
            <span>{{item.name}}</span>
          </div>
          <div class="project-status">
            <span>{{item.fileNum}}个文件</span>
            <a-tag color="red">{{item.state}}</a-tag>
            <SyncOutlined spin />
          </div>
        </div>
        
        <div class="project-info">
          <div class="info-row">
            <span>上传时间: {{item.time}}</span>
            <span>已处理: {{item.processing}}分钟</span>
          </div>
          <div class="info-row">
            <span>大模型解析: {{ item.multiModel }}</span>
            <span>剩余: {{item.finishTime}}分钟</span>
          </div>
        </div>
      </a-card>
    </vue3-seamless-scroll>
      <!-- 已完成的项目 -->
      <!-- <a-card class="project-card">
        <div class="project-header">
          <div class="project-title">
            <FileOutlined :style="{ fontSize: '16px', color: '#ff4d4f' }" />
            <span>深圳市政项目</span>
          </div>
          <div class="project-status">
            <span>4个文件</span>
            <a-tag color="success">已完成</a-tag>
            <SyncOutlined />
          </div>
        </div>
        
        <div class="project-info">
          <div class="info-row">
            <span>上传时间: 2024-02-17 08:30</span>
            <span>完成时间: 09:30</span>
          </div>
          <div class="info-row">
            <span>大模型解析: 45分钟</span>
            <span>总耗时: 90分钟</span>
          </div>
        </div>
      </a-card> -->
    </div>
  </div>
      </div>

      <!-- 中间AI助手区域 -->
      <div class="ai-assistant">
        <h3>AI助手</h3>
        <div class="chat-window">
          <div class="chat-messages">
            <div class="message system">
              您好，我是智能助手，现可以帮您：1.分析招标文件 2.提供关键建议 3.回答相关问题
            </div>
            <div class="progress-info">
              <p>开始上传文件: 招标文件.pdf(23.5MB) 10:30:15</p>
              <p>检测到模糊页面图像，正在优化处理 10:33:45</p>
              <p>第123页解析中完成，正在重试 10:33:50</p>
              <p>重试成功，继续处理 10:33:55</p>
              <p>生成分析报告 10:34:00</p>
              <p>分析报告生成完成 10:34:10</p>
              <p>文件处理流程结束 10:34:15</p>
            </div>
          </div>
          <div class="chat-input">
            <a-input-search
              placeholder="输入您的问题或推荐..."
              enter-button="发送"
              @search="onSearch"
            />
          </div>
        </div>
      </div>

      <!-- 右侧分析结果区域 -->
      <div class="analysis-result">
        <h3>应标书分析</h3>
        <div class="score-cards">
          <a-card v-for="supplier in suppliers" :key="supplier.name">
            <template #title>
              <div class="supplier-score">
                <span>供应商{{ supplier.name }}</span>
                <span class="score">{{ supplier.score }}分</span>
              </div>
            </template>
            <div class="score-details">
              <div class="score-item">
                <span>技术评分</span>
                <span>{{ supplier.technical }}</span>
              </div>
              <div class="score-item">
                <span>价格评分</span>
                <span>{{ supplier.price }}</span>
              </div>
              <div class="score-item">
                <span>投标时间</span>
                <span>{{ supplier.time }}</span>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 引入图标
import { CloudUploadOutlined, PlusOutlined, SyncOutlined,CaretUpOutlined,FileOutlined} from '@ant-design/icons-vue';
// 修改滚动配置
const scrollOptions = {
  step: 0.5,
  limitScrollNum: 2,
  hover: true,
  direction: 'up',
  singleHeight: 100,
  delay: 1000,
  wheel:false
};

// 文件列表数据
const files = ref([
  {
    name: '招标文件.pdf',
    status: '处理中 75%',
    uploadTime: '2024-02-17 10:30',
    estimatedTime: '15分钟'
  },
  {
    name: '技术要求.pdf',
    status: '排队中',
    uploadTime: '2024-02-17 10:30',
    estimatedTime: '25分钟'
  }
]);
const refreshCount = ref(0);
// 当前项目文件
const projectList=ref<any>([
{name:"招标文件.pdf",state:"处理中",time:"2024-02-17 10:30",finishTime:"15分钟"},
{name:"技术要求.pdf",state:"排队中",time:"2024-02-17 10:32",finishTime:"25分钟"},
])
// 处理项目
const disposeProjectList=ref([
{name:"深圳市政项目",fileNum:"2",state:"处理中",time:"2024-02-17 10:30",processing:"15",multiModel:"30分钟",finishTime:"45"},
{name:"深圳市政项2目",fileNum:"2",state:"已完成",time:"2024-02-17 10:34",processing:"15",multiModel:"40分钟",finishTime:"45"},

])
// 供应商分析数据
const suppliers = ref([
  {
    name: 'A',
    score: 88.5,
    technical: 89,
    price: 90,
    time: '2024-02-17 10:30'
  },
  {
    name: 'B',
    score: 88.5,
    technical: 89,
    price: 90,
    time: '2024-02-17 10:30'
  },
  {
    name: 'C',
    score: 88.5,
    technical: 89,
    price: 90,
    time: '2024-02-17 10:30'
  }
]);

// 搜索处理函数
const onSearch = (value: string) => {
  console.log('搜索:', value);
};
</script>

<style scoped>
.file-analysis {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
 .current-project {
    .sub-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 16px;
    }
  }

  .project-card {
    margin-bottom: 16px;

    .project-header {
      /* display: flex;
      justify-content: space-between;
      align-items: center; */
      margin-bottom: 16px;

      .project-name {
        font-size: 16px;
        font-weight: 500;
      }

      .file-count {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .file-list {
    height: 300px; 
    overflow: hidden; 
    .scroll-container {
    height: 100%; 
  }
    .file-item {
      background: #fafafa;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 12px;

      &.processing {
        background: #fff1f0;
      }

      &.queuing {
        background: #f5f5f5;
      }

      .file-basic {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .file-name {
          flex: 1;
        }

        .status {
          color: #1890ff;
        }
      }

      .file-meta {
        display: flex;
        justify-content: space-between;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }

  .action-group {
    display: flex;
    /* gap: 8px; */
    justify-content: space-between;
    margin-top: 16px;

    .ant-btn {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }

/* 左一最近处理项目部分 */
.recent-projects {
  

  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .project-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .project-card {
    .project-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .project-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
      }

      .project-status {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    .project-info {
      .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  color: #1890ff;
}

.logo h2 {
  margin: 10px 0 0;
  font-size: 18px;
  color: #333;
}

.main-content {
  height: calc(100% - 100vh);
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}

.file-management,
.ai-assistant,
.analysis-result {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height:100%;
  /* height:calc(100% - 100vh); */
  overflow: auto;

  .current-project {
    margin-bottom: 20px;
  }
}
/* .file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
} */

.file-item {
  margin-bottom: 10px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-status {
  color: #1890ff;
}

.file-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
}

.message.system {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
}

.progress-info p {
  margin: 5px 0;
  color: #666;
}

.supplier-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score {
  color: #1890ff;
  font-size: 18px;
  font-weight: bold;
}

.score-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  color: #666;
}
</style>